<template>
  <div>
    <dt-dialog
      ref="dialogPopupRef"
      :title="dtDetailOption.title || '详情'"
      :visible="dialogVisible"
      :width="dtDetailOption.width || '656px'"
      :footerSlot="true"
      @closeDialog="dialogVisible=false"
      @comfirmBtn="dialogVisible=false"
    >
      <div slot="content">
        <!-- :label-style="labelCenter" -->
        <el-descriptions label-class-name="label_class" :column="dtDetailOption.column ? dtDetailOption.column:1" border :size="dtDetailOption.size || ''">
          <el-descriptions-item v-for="(item,index) in dtDetailOption.rows" :key="index" :content-class-name="item.contentClass" :label-style="{width:dtDetailOption.labelWidth?dtDetailOption.labelWidth:'120px'}" :label="item.label" :span="item.span">
            <span v-if="item.type === 'function' && item.callback">
              {{ item.callback(dtDetailOption.data[item.prop],item) }}
            </span>
            <span v-else-if="item.type === 'dict'">
              <dt-dict-tag :options="item.options" :value="dtDetailOption.data[item.prop]" />
            </span>
            <div v-else-if="item.type === 'img'" class="demo-image__preview">
              <el-image
                style="width: 100px; height: 100px"
                fit="fill"
                :src="dtDetailOption.data[item.prop] ? dtDetailOption.data[item.prop] : require('@/framework/assets/item.png')"
                :preview-src-list="dtDetailOption.data[item.prop] ? [dtDetailOption.data[item.prop]] : [require('@/framework/assets/item.png')]"
              />
            </div>
            <div v-else-if="item.type === 'video'" class="demo-image__preview video-wrap">
              <video width="80%" :src="dtDetailOption.data[item.prop]" controls
                     crossOrigin="anonymous"  controlslist="nodownload" :poster="dtDetailOption.data.cover"
                     @contextmenu="(e) => {e.preventDefault()}"
              />
            </div>
            <span v-else>{{ dtDetailOption.data[item.prop] || '暂无' }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </dt-dialog>
  </div>
</template>

<script>
import _ from 'lodash' // 导入loadsh插件
export default {
  name: 'DtDetail',
  components: {
  },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    dtDetailOption: {
      type: Object
    },
    labelCenter: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      dateRange: ['', ''],
      listQuery: {},
      form: {},
      dialogVisible: false
    }
  },
  watch: {
    'filterData': {
      handler: function(val) {
        if (val.elinput.length > 0) {
          val.elinput.map(item => {
            this.listQuery[item.key] = ''
          })
        }
        if (val.elselect.length > 0) {
          val.elinput.map(item => {
            this.listQuery[item.key] = ''
          })
        }
      }
      // immediate: true,
      // deep: true
    },
    'filterData.rest': {
      handler: function(val) {
        if (val) {
          this.handleRest()
        }
      },
      deep: true
    }
  },
  methods: {
    handleSearch() {
      const data = _.cloneDeep(this.listQuery)
      if (this.dateRange && this.dateRange[0] !== '') {
        const startTime = this.dateRange[0] + ' 00:00:00'
        const endTime = this.dateRange[1] + ' 23:59:59'
        data.beginDate = startTime
        data.endDate = endTime
      }
      Object.keys(data).forEach(function(key) {
        if (data[key] === '') {
          delete data[key]
        }
      })
      this.$emit('searchClick', data)
    },
    handleRest() {
      const data = _.cloneDeep(this.listQuery)
      Object.keys(data).forEach(function(key) {
        data[key] = ''
      })
      this.listQuery = data
      this.dateRange = ['', '']
    }
  }
}
</script>

<style  scoped lang='scss'>
.el-descriptions{
  ::v-deep .el-descriptions__table {
    border-collapse: collapse;
    width: 100%;
  }
  ::v-deep .el-descriptions-row{
    border: 1px solid #ebeef5 ;
    // display: flex;
      .label_class{
        text-align: right;
        height: 36px;
        line-height: 36px;
        font-weight: 400;
        color: #333333;
        padding: 10px 20px;
        // width: 134px;
        background: #fafafa;
      }
      .el-descriptions-item__content{
        // flex: 1;
        padding: 0 32px;
        font-weight: 400;
        color: #333;
      }
      .label_center{
        text-align: center;
      }
  }
  .demo-image__preview{
    display: flex;
    margin: 16px 0;
  }
}

::v-deep .el-dialog{
  .dialog-footer{
    .cancalBtn {
      display: none;
    }
  }
}
.video-wrap {
  text-align: center;
  video {
    object-fit: cover;
  }
}

</style>
